<template>
门店名称:<input type="text" v-model="ShopName">
分店名称:<input type="text" v-model="FShopName">
<input type="button" value="查询" @click="LoadData">
    <h2>门店显示</h2>
    <table border="1" class="table table-success">

    
    <thead>
        <tr>
            <td>门店名称</td>
            <td>分店名称</td>
            <td>门店地址</td>
            <td>门店电话</td>
            <td>门店状态</td>
            <td>门店介绍</td>
            <td>入住须知</td>
            <td>门店图片</td>
            <td>交通信息</td>
            <td>操作列</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in info">
            <td>{{ item.ShopName }}</td>
            <td>{{ item.Shop_BranchName }}</td>
            <td>{{item.Shop_Address}}</td>
            <td>{{item.Shop_Phone}}</td>
            <td>{{item.Shop_State==true?"开业":"维修"}}</td>
            <td>{{item.Shop_Info}}</td>
            <td>{{item.Shop_Notice}}</td>
            <td><img  style="width: 60px; height: 70px;" :src="item.Shop_Img" /></td>
            <td>{{item.Shop_Traffic}}</td>
            <td>操作列
              
                <a href="#" @click="Update(item.ShopId)">修改</a>
            </td>
        </tr>


    </tbody>
</table>
当前共{{ pageInfo.totalCount }}条,当前页{{ pageInfo.pageSize }}条
当前页共{{ pageInfo.pageIndex }}/{{pageInfo.pageCount  }}页

<span>
    <a href="#" @click="PageChange('F')" style="margin-right: 20px;">首页</a>
    <a href="#" @click="PageChange('U')" style="margin-right: 20px;">上一页</a>
    <a href="#" @click="PageChange('N')" style="margin-right: 20px;">下一页</a>
    <a href="#" @click="PageChange('E')" style="margin-right: 20px;">尾页</a>
</span>
</template>
<script setup lang="ts">

import { onMounted,ref } from 'vue';
import axios from 'axios';

import { useRouter } from 'vue-router';


const router=useRouter();

//修改
const Update=(ShopId:number)=>{

    router.push({
        name:"UpdateShop",
        params:{
             id:ShopId
        }
    })


}



const ShopName=ref("");
const FShopName=ref("");




//分页
const pageInfo=ref({

pageIndex:1,
pageSize:2,
totalCount:0,
pageCount:0


})


const info=ref([{
    ShopId:0,
    ShopName:"",
    Shop_BranchName:"",
    Shop_Address:"",
    Shop_Phone:"",
    Shop_State:true,
    Shop_Info:"",
    Shop_Notice:"",
    Shop_Traffic:"",
    Shop_Img:""




}])

onMounted(()=>{
    LoadData();
})
//数据加载
const LoadData=()=>{

axios.get('https://localhost:7153/api/Shop/ShowShop',

{
    params:{
        ShopName:ShopName.value,
        FShopName:FShopName.value,
        pageIndex:pageInfo.value.pageIndex,
        pageSize:pageInfo.value.pageSize

    }
}

)

.then(res=>{

    info.value=res.data.Data_Info;
    pageInfo.value.totalCount=res.data.TotalCount
    pageInfo.value.pageCount=res.data.PageCount


})



}

//分页
const PageChange=(choose:string)=>{

    switch(choose){

        case 'F':
            pageInfo.value.pageIndex=1;
            break;
            case 'U':
                pageInfo.value.pageIndex=pageInfo.value.pageIndex-1;
                break;
                case 'N':
                    pageInfo.value.pageIndex=pageInfo.value.pageIndex+1;
                    break;
                    case 'E':
                        pageInfo.value.pageIndex=pageInfo.value.pageCount;
                        break;




    }
LoadData();



}



</script>